<template>
  <div>
    <!-- {{ dialogVisible }} -->
    <el-dialog
      title="详情"
      :visible.sync="dialogVsible"
      :before-close="handel"
      top="0"
    >
      <div class="body" v-if="detailvisible">
        <h3>警情信息</h3>
        <div style="display: flex; justify-content: space-between">
          <div class="title">
            <p>学校名称</p>
            <p>警情来源</p>
            <p>报警人姓名</p>
            <p>报警位置</p>
            <p>处理人姓名</p>
          </div>
          <div>
            <p>{{ detail.school_name }}</p>
            <p>
              <span v-if="detail.type == 1">小程序</span
              ><span v-if="detail.type == 2">主机</span>
            </p>
            <p>{{ detail.user_name }}</p>
            <p>{{ detail.address }}</p>
            <p>
              {{ detail.cl_name }} <span v-if="detail.cl_name == null">-</span
              ><span v-else>{{ detail.clr_name }}</span>
            </p>
          </div>
          <div class="title">
            <p>所属派出所</p>
            <p>报警人手机号</p>
            <p>报警时间</p>
            <p>处理结果</p>
            <p>处理时间</p>
          </div>
          <div>
            <p>{{ detail.department_name }}</p>
            <p>
              <span>{{ detail.user_lxdh }}</span>
            </p>
            <p>{{ detail.create_time }}</p>
            <p>
              <span v-if="detail.status == 2">已处理</span
              ><span v-if="detail.status == 1">未处理</span>
            </p>
            <p>
              <span v-if="detail.cl_time == null">-</span
              ><span v-else>{{ detail.cl_time }}</span>
            </p>
          </div>
        </div>
      </div>
      <div class="body" v-if="deviceVisible">
        <h3>设备信息管理</h3>
        <div style="display: flex; justify-content: space-between">
          <div class="title">
            <p>设备名称</p>
            <p>设备类型</p>
            <p>设备状态</p>
            <p>绑定学校</p>
          </div>
          <div>
            <p>{{ detail.sbmc }}</p>
            <p>
              {{ detail.sbType }}
            </p>
            <p>
              <span v-if="detail.deviceStatus == 0">离线</span>
              <span v-else>在线</span>
            </p>
            <p>
              {{ detail.clr_name }} <span v-if="detail.bdschool == null">-</span
              ><span v-else>{{ detail.bdschool }}</span>
            </p>
          </div>
          <div class="title">
            <p>设备id</p>
            <p>安装地址</p>
            <p>添加人姓名</p>
            <p>添加时间</p>
          </div>
          <div>
            <p>{{ detail.deviceid }}</p>
            <p>
              <span v-if="detail.azdz == null">-</span>
              <span v-else>{{ detail.azdz }}</span>
            </p>
            <p>{{ detail.addPeopleName }}</p>
            <p>
              {{ detail.time }}
            </p>
          </div>
        </div>
      </div>
      <div class="body punch" style="height: auto" v-if="punchVisible">
        <h3>打卡记录</h3>
        <div style="display: flex; justify-content: space-between">
          <div class="title">
            <p>护卫学校名称</p>
            <p>姓名</p>
            <p>打卡地点</p>
            <p>照片</p>
          </div>
          <div>
            <p>{{ detail.dwmc }}</p>
            <p>{{ detail.xm }}</p>
            <p>{{ detail.address }}</p>
            <p style="height: 80px">
              <el-image
                style="
                  width: 70px;
                  height: 70px;
                  padding: 10px;
                  box-sizing: border-box;
                "
                :src="detail.photo"
                v-if="detail.photo"
                :preview-src-list="[detail.photo]"
              >
              </el-image>
            </p>
          </div>
          <div class="title">
            <p>所属派出所</p>
            <p>打卡时间</p>
            <p>抓拍照片</p>
            <p></p>
          </div>
          <div>
            <p>{{ detail.department_name }}</p>
            <p>{{ detail.create_time }}</p>
            <p>
              <el-image
                style="
                  width: 70px;
                  height: 70px;
                  padding: 10px;
                  box-sizing: border-box;
                "
                :src="detail.photo"
                v-if="detail.photo"
                :preview-src-list="[detail.photo]"
              >
              </el-image>
            </p>
            <p></p>
          </div>
        </div>
      </div>
      <!-- 通知通告详情 -->
      <div class="body punch" style="height: auto" v-if="SchoolNoticeVisible">
        <h3>重点关注车辆</h3>
        <div style="display: flex; justify-content: space-between">
          <div class="title">
            <p>封面</p>
            <p>标题</p>
            <p>正文内容</p>
          </div>
          <div>
            <p>
              <el-image
                style="
                  width: 100px;
                  height: 70px;
                  padding: 10px;
                  box-sizing: border-box;
                "
                :src="detail.imageUrl"
                :preview-src-list="[detail.imageUrl]"
              >
              </el-image>
            </p>
            <p>{{ detail.title }}</p>
            <p>{{ detail.content }}</p>
          </div>
          <div class="title">
            <p>摘要</p>
            <p>通知人员类型</p>
            <p>时间</p>
          </div>
          <div>
            <p>{{ detail.abstract }}</p>
            <p>{{ detail.peopleType }}</p>
            <p>{{ detail.time }}</p>
          </div>
        </div>
      </div>
      <!-- 访客登记记录 -->
      <div class="body visitor" style="height: auto" v-if="visitorVisible">
        <h3>访客信息</h3>
        <div style="display: flex; justify-content: space-between">
          <div style="align-items: center">
            <p style="height: auto; border: none">
              <el-image
                style="
                  width: 200px;
                  height: 260px;
                  padding: 10px;
                  box-sizing: border-box;
                "
                :src="detail.pic"
                v-if="detail.pic"
                :preview-src-list="[detail.pic]"
              >
              </el-image>
            </p>
          </div>
          <div class="title">
            <p>被访者姓名</p>
            <p>访客手机号</p>
            <p>证件号码</p>
            <p>是否驾车</p>
            <p>访客事由</p>
            <p>核验结果</p>
            <p>访问单位</p>
          </div>
          <div>
            <p>{{ detail.respondent }}</p>
            <p>
              <span v-if="!showPhone">{{ detail.tm_visitor_phone }}</span>
              <span v-else>{{ detail.visitor_phone }}</span>
              <el-button
                type="text"
                icon="el-icon-view"
                @click="showPhone = !showPhone"
              ></el-button>
            </p>
            <p>
              <span v-if="!showIdCardV">{{ detail.tm_visitor_identity }}</span>
              <span v-else>{{ detail.visitor_identity }}</span>
              <el-button
                type="text"
                icon="el-icon-view"
                @click="showIdCardV = !showIdCardV"
              ></el-button>
            </p>
            <p>
              <span v-if="detail.is_drive == 1">驾车</span>
              <span v-else>未驾车</span>
            </p>
            <p>{{ detail.reason }}</p>
            <p>
              <!-- <span v-if="detail.status == 1">可访问</span>
              <span v-if="detail.status == 2">拒绝访问</span>
              <span v-else>待处理</span> -->
              <el-tag
                size="medium"
                v-if="detail.status == 1"
                style="
                  width: 70px;
                  height: 30px;
                  background: #ffffff;
                  border-radius: 4px 4px 4px 4px;
                  opacity: 1;
                  color: #1cdc7c;
                  border: 1px solid #1cdc7c;
                  line-height: 30px;
                "
                >允许访问</el-tag
              >
              <el-tag
                size="medium"
                v-if="detail.status == 2"
                style="
                  width: 70px;
                  height: 30px;
                  background: #ffffff;
                  border-radius: 4px 4px 4px 4px;
                  opacity: 1;
                  border: 1px solid #ff4444;
                  color: #ff4444;
                  line-height: 30px;
                "
                >拒绝访问</el-tag
              >
              <el-tag
                size="medium"
                v-if="detail.status == 3"
                style="
                  width: 70px;
                  height: 30px;
                  background: #ffffff;
                  border-radius: 4px 4px 4px 4px;
                  opacity: 1;
                  border: 1px solid #126bff;
                  color: #126bff;
                  line-height: 30px;
                "
                >待核验</el-tag
              >
              <el-tag
                size="medium"
                v-if="detail.status == 4"
                style="
                  width: 70px;
                  height: 30px;
                  background: #ffffff;
                  border-radius: 4px 4px 4px 4px;
                  opacity: 1;
                  color: #1cdc7c;
                  border: 1px solid #1cdc7c;
                  line-height: 30px;
                "
                >人员正常</el-tag
              >

              <el-tag
                size="medium"
                v-if="detail.status == 5"
                style="
                  width: 70px;
                  height: 30px;
                  background: #ffffff;
                  border-radius: 4px 4px 4px 4px;
                  opacity: 1;
                  border: 1px solid #ff4444;
                  color: #ff4444;
                  line-height: 30px;
                "
                >人员异常</el-tag
              >
            </p>
            <p>{{ detail.school_name }}</p>
          </div>
          <div class="title">
            <p>访客姓名</p>
            <p>访客性别</p>
            <p>与被访者关系</p>
            <p>车牌号码</p>
            <p>到访地点</p>
            <p>登记时间</p>
            <p></p>
          </div>
          <div>
            <p>{{ detail.visitor_name }}</p>
            <p>
              <span v-if="detail.visitor_sex == 1">男</span>
              <span v-else>女</span>
            </p>
            <p>{{ detail.relation }}</p>
            <p>
              <span v-if="detail.plate_number != ''">{{
                detail.plate_number
              }}</span>
              <span v-else>-</span>
            </p>
            <p>{{ detail.address }}</p>
            <p>{{ detail.create_time }}</p>
            <p></p>
          </div>
        </div>
        <h3>审核信息</h3>
        <div style="display: flex; justify-content: space-between">
          <div class="title">
            <p>审核人姓名</p>
            <p>拒绝理由</p>
          </div>
          <div>
            <p>{{ detail.respondent }}</p>
            <p>
              <span v-if="detail.remark == null">-</span>
              <span v-else>{{ detail.remark }}</span>
            </p>
          </div>
          <div class="title">
            <p>审核结果</p>
            <p>审核时间</p>
          </div>
          <div>
            <p>
              <el-tag
                size="medium"
                v-if="detail.status == 1"
                style="
                  width: 70px;
                  height: 30px;
                  background: #ffffff;
                  border-radius: 4px 4px 4px 4px;
                  opacity: 1;
                  color: #1cdc7c;
                  border: 1px solid #1cdc7c;
                  line-height: 30px;
                "
                >允许访问</el-tag
              >
              <el-tag
                size="medium"
                v-if="detail.status == 2"
                style="
                  width: 70px;
                  height: 30px;
                  background: #ffffff;
                  border-radius: 4px 4px 4px 4px;
                  opacity: 1;
                  border: 1px solid #ff4444;
                  color: #ff4444;
                  line-height: 30px;
                "
                >拒绝访问</el-tag
              >
              <el-tag
                size="medium"
                v-if="detail.status == 3"
                style="
                  width: 70px;
                  height: 30px;
                  background: #ffffff;
                  border-radius: 4px 4px 4px 4px;
                  opacity: 1;
                  border: 1px solid #126bff;
                  color: #126bff;
                  line-height: 30px;
                "
                >待核验</el-tag
              >
              <el-tag
                size="medium"
                v-if="detail.status == 5"
                style="
                  width: 70px;
                  height: 30px;
                  background: #ffffff;
                  border-radius: 4px 4px 4px 4px;
                  opacity: 1;
                  border: 1px solid #ff4444;
                  color: #ff4444;
                  line-height: 30px;
                "
                >人员异常</el-tag
              >
            </p>
            <p>{{ detail.update_time }}</p>
          </div>
        </div>
      </div>
      <!-- 图文上报记录 -->
      <div class="body" style="height: 261px" v-if="imgvisible">
        <h3>图文上报</h3>
        <div style="display: flex; justify-content: space-between">
          <div class="title">
            <p>学校名称</p>
            <p>标题</p>
            <p>上报人姓名</p>
            <p>照片</p>
          </div>
          <div>
            <p>{{ detail.dwmc }}</p>
            <p>{{ detail.title }}</p>
            <p>{{ detail.xm }}</p>
            <p>
              <el-image
                style="
                  width: 50px;
                  height: 50px;
                  padding: 5px;
                  box-sizing: border-box;
                "
                :src="detail.img_one"
                v-if="detail.img_one"
                :preview-src-list="[detail.img_one]"
              >
              </el-image>
              <el-image
                style="
                  width: 50px;
                  height: 50px;
                  padding: 5px;
                  box-sizing: border-box;
                "
                :src="detail.img_two"
                v-if="detail.img_two"
                :preview-src-list="[detail.img_two]"
              >
              </el-image
              ><el-image
                style="
                  width: 50px;
                  height: 50px;
                  padding: 5px;
                  box-sizing: border-box;
                "
                :src="detail.img_three"
                v-if="detail.img_three"
                :preview-src-list="[detail.img_three]"
              >
              </el-image>
            </p>
          </div>
          <div class="title">
            <p>所属派出所</p>
            <p>正文内容</p>
            <p>上报人手机号</p>
            <p>上报时间</p>
          </div>
          <div>
            <p>{{ detail.ssjwsq }}</p>
            <p style="overflow: scroll">{{ detail.content }}</p>
            <p>
              <!-- <template slot-scope="scope"> -->
              <span v-if="!showIdCardV">{{ detail.tm_xlmj_lxdh }}</span>
              <span v-else>{{ detail.xlmj_lxdh }}</span>
              <!-- <el-button
                type="text"
                icon="el-icon-view"
                @click="showIdCardV = !showIdCardV"
              ></el-button> -->
              <!-- </template> -->
            </p>
            <p>{{ detail.create_time }}</p>
          </div>
        </div>
      </div>
      <el-button
        type="primary"
        @click="confirm"
        style="
          width: 205px;
          height: 40px;
          line-height: 16px;
          text-align: center;
          background: #126bff;
          opacity: 1;
          margin: 0 auto;
          margin-top: 10px;
          border-radius: 6px;
        "
        >关闭</el-button
      >
      <!-- </span> -->
    </el-dialog>
    <!-- 车辆预警 -->
    <el-dialog
      title="详情"
      :visible.sync="warnVsible"
      :before-close="handel"
      width="500px"
      top="0"
    >
      <div class="personnel" style="height: auto" v-if="carWarningVisible">
        <p
          style="
            font-size: 20px;
            font-family: .PingFang SC-Regular, PingFang SC;
            font-weight: bold;
            color: #ff2d2d;
            margin-bottom: 10px;
          "
        >
          <span
            ><img
              style="width: 22.35px; height: 21.75px; margin-right: 10px"
              src="@/assets/pagesImg/4944.png"
              alt="" /></span
          >车辆预警
        </p>
        <div style="display: flex; flex-wrap: wrap; text-align: left">
          <div class="upIpfo">
            <div style="text-align: center; flex: 1">
              <p style="box-sizing: border-box; margin-right: 10px">
                <img
                  :src="detail.photo"
                  alt=""
                  style="width: 100px; height: 100px"
                />
                <span class="imgDes">车辆库图像</span>
              </p>
              <span class="ssd" style="">
                <div>{{ detail.xsd }}%</div>
              </span>
              <p>
                <img
                  :src="detail.photo"
                  alt=""
                  style="width: 100px; height: 100px"
                />
                <span class="imgDes">抓拍图像</span>
              </p>
            </div>
          </div>
          <div class="upIpfo">
            <p>车主姓名：{{ detail.name }}</p>
            <p>性别：{{ detail.sex }}</p>
          </div>
          <div class="upIpfo">
            <p>联系方式：{{ detail.lxfs }}</p>
            <p>关注车辆类型：{{ detail.gzcllx }}</p>
          </div>
          <div class="upIpfo">
            <p>车牌号码：{{ detail.carID }}</p>
            <p>相似度：{{ detail.xsd }}%</p>
          </div>
          <div class="upIpfo">
            <p>车牌特征：{{ detail.carCharacteristics }}</p>
            <p>预警设备：{{ detail.yjsb }}</p>
          </div>
          <div class="upIpfo">
            <p class="text">预警设备：{{ detail.yjsb }}</p>
            <p>
              处理结果：
              <span v-if="detail.status == 1">已处理</span
              ><span v-if="detail.status == 0">未处理</span>
            </p>
          </div>
          <div class="upIpfo">
            <p>报警时间：{{ detail.yjss }}</p>
            <p>预警地点：{{ detail.yjdd }}</p>
          </div>
          <div class="upIpfo"></div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button
          @click="hulue()"
          style="
            background-color: #e6effa;
            color: #126bff;
            margin-left: 10px;
            height: 36px;
            width: 96px;
            border-radius: 6px;
            opacity: 1;
            font-size: 14px;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            font-weight: 400;
          "
          >忽 略</el-button
        >
        <el-button
          type="primary"
          style="
            height: 36px;
            width: 96px;
            background-color: #126bff;
            border-radius: 6px;
            opacity: 1;
            color: #ffffff;
            font-size: 14px;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            font-weight: 400;
            margin-left: 10px;
          "
          >去 处 理</el-button
        >
      </span>
    </el-dialog>
    <!-- 人员预警 -->
    <el-dialog
      title="详情"
      :visible.sync="personnelWarningVisible"
      :before-close="handel"
      width="500px"
      top="0"
    >
      <div
        class="personnel"
        style="height: auto"
        v-if="personnelWarningVisible"
      >
        <p
          style="
            font-size: 20px;
            font-family: .PingFang SC-Regular, PingFang SC;
            font-weight: bold;
            color: #ff2d2d;
            margin-bottom: 10px;
          "
        >
          <span
            ><img
              style="width: 22.35px; height: 21.75px; margin-right: 10px"
              src="@/assets/pagesImg/4944.png"
              alt="" /></span
          >人员预警
        </p>
        <div style="display: flex; flex-wrap: wrap; text-align: left">
          <div class="upIpfo">
            <div style="text-align: center; flex: 1">
              <p style="box-sizing: border-box; margin-right: 10px">
                <img
                  :src="detail.photo"
                  alt=""
                  style="width: 100px; height: 100px"
                />
                <span class="imgDes">人员库图像</span>
              </p>
              <span class="ssd" style="">
                <div>
                  {{ detail.xsd }}
                </div>
              </span>
              <p>
                <img
                  :src="detail.photo"
                  alt=""
                  style="width: 100px; height: 100px"
                />
                <span class="imgDes">抓拍图像</span>
              </p>
            </div>
          </div>
          <div class="upIpfo">
            <p>姓名：{{ detail.name }}</p>
            <p>性别：{{ detail.sex }}</p>
          </div>
          <div class="upIpfo">
            <p>民族：{{ detail.nation }}</p>
            <p>关注人员类型：{{ detail.gzrylx }}</p>
          </div>
          <div class="upIpfo">
            <p>
              身份证号:
              <span v-if="!detail.showIdCard">{{ detail.idCard }}</span>
              <!-- <span v-else
                >{{ detail.idCard.substr(0, 6) }}********{{
                  detail.idCard.substr(14)
                }}</span
              > -->
              <el-button
                type="text"
                icon="el-icon-view"
                @click="showIdCard()"
              ></el-button>
            </p>
            <p class="text">相似度：{{ detail.xsd }}</p>
          </div>
          <div class="upIpfo">
            <p>人员特征：{{ detail.personnelCharacteristics }}</p>
            <p class="text">预警设备：{{ detail.yjsb }}</p>
          </div>
          <div class="upIpfo">
            <p>报警时间：{{ detail.yjss }}</p>
            <p>预警地点：{{ detail.yjdd }}</p>
          </div>
          <div class="upIpfo">
            <p>
              处理结果：
              <span v-if="detail.status == 1">已处理</span
              ><span v-if="detail.status == 0">未处理</span>
            </p>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="hulue()">忽 略</el-button>
        <el-button type="primary">去 处 理</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "APP",
  components: {},
  data() {
    return {
      showIdCardV: false,
      showPhone: false,
      tableData: [
        { column1: "数据1", column2: "数据2", column3: "数据3" },
        { column1: "数据4", column2: "数据5", column3: "数据6" },
        { column1: "数据7", column2: "数据8", column3: "数据9" },
      ],
      show: false,
      // internalDialogVisible: this.dialogVisible,
    };
  },
  props: {
    dialogVsible: {
      type: Boolean,
      default: false,
    },

    detail: {
      type: Object,
      default: null,
    },

    deviceVisible: {
      ype: Boolean,
      default: false,
    },
    punchVisible: {
      type: Boolean,
      default: false,
    },
    detailvisible: {
      type: Boolean,
      default: false,
    },
    SchoolNoticeVisible: {
      type: Boolean,
      default: false,
    },
    visitorVisible: {
      type: Boolean,
      default: false,
    },
    imgvisible: {
      type: Boolean,
      default: false,
    },
    carWarningVisible: {
      type: Boolean,
      default: false,
    },
    personnelWarningVisible: {
      type: Boolean,
      default: false,
    },
    warnVsible: {
      type: Boolean,
      default: false,
    },
  },
  computed: {},
  // watch
  methods: {
    confirm() {
      console.log("111");
      this.$emit("Confirm", false);
    },
    handel() {
      this.$emit("handel", false);
    },
    // handleClose() {
    //   this.$emit("handel", false);
    // },
    hulue() {
      console.log("sad");
      this.$emit("hulue", false);
    },
    showIdCard() {
      this.show = !this.show;
      this.$emit("showIdCard", this.show);
    },
  },
  created() {},
  mounted() {
    console.log(this.detail);
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__body {
  padding: 0 20px 20px 20px !important;
}
.body {
  width: 100%;
  height: auto;
  border-radius: 16px 16px 16px 16px;
  opacity: 1;
  border: 1px solid #d7dbe3;
}
.body h3 {
  width: 100%;
  text-align: center;
  height: 40px;
  line-height: 40px;
  background: #ecf5ff;
  border-radius: 16px 16px 0px 0px;
  opacity: 1;
  font-size: 20px;
  font-family: Microsoft YaHei-Bold, Microsoft YaHei;
  font-weight: bold;
  color: #13213b;
}
.body > div > div {
  border-right: 1px #d7dbe3 solid;
  width: 25%;
  display: flex;
  flex-direction: row;
  align-content: stretch;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
}

.body > div > div:nth-last-of-type(1) {
  border-right: none;
}
.body > div > div > p {
  border-right: none;
  border-left: none;
  border-top: 1px #d7dbe3 solid;
  // background-color: #d7dbe3;
  // background-color: red;
}
/deep/.body p {
  // border: 1px red solid;
  width: 100%;
  height: 55px !important;
  // line-height: 50px;
  text-align: center;
  display: flex;
  align-content: flex-end;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}
.visitor p {
  width: 100%;
  height: 45px;
  // line-height: 50px;
  text-align: center;
  display: flex;
  align-content: flex-end;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}
.title {
  font-size: 14px;
  font-family: Microsoft YaHei-Bold, Microsoft YaHei;
  font-weight: bold;
  color: #13213b;
}
.punch p {
  width: 100%;
  height: 45px;
  // line-height: 50px;
  text-align: center;
  display: flex;
  align-content: flex-end;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}
::v-deep.el-dialog__footer {
  text-align: center !important;
}

.img {
  width: 50px;
  height: 50px;
}
.upIpfo {
  display: flex;
  width: 100%;
  //
  justify-content: space-between;
}
.upIpfo p {
  color: #13213b;
  font-size: 14px;
  font-weight: 400;
  width: 48%;
  margin-top: 10px;
  //
  display: inline-block;
  position: relative;
  // background-color: skyblue;
}
.imgDes {
  // border: 1px red solid;
  display: inline-block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 1;
  background: #000000;
  border-radius: 0px 0px 8px 8px;
  opacity: 0.5;
  font-size: 19px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
}
/deep/.dialog-footer {
  text-align: center !important;
}
.ssd {
  // border: 1px red solid;
  position: absolute;
  display: inline-block;
  width: 76px !important;
  height: 76px !important;
  background-image: url("@/assets/pagesImg/xsd.png");
  background-size: cover;
  border-radius: 50%;
  text-align: center;
  line-height: 76px;
  opacity: 1;
  z-index: 10;
  left: 42%;
  top: 21%;
  font-size: 20px;
  font-family: Arial-Bold, Arial;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}
</style>
